<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——可见性过滤选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body {font-size:12px;text-align: center;}
        div,span { float:left; margin:8px; border: solid 1px #666 ; width: 100px; height: 100px;}
        .GetFocus {width: 100px; border: solid 1px #666; background-color: #eee}
    </style>
</head>
<body>
    <span style="display: none">Hidden</span>
    <div>Visible</div>
</body>
<script type="application/javascript" >
    // 可见性过滤选择器：根据元素是否可见的特性选择元素
    /*获取不可见的元素(:hidden)*/
    $("span:hidden").show(1000);
    /*获取可见的元素(:visible)*/
    $("div:visible").addClass('GetFocus');
</script>
</html>